<template>
  <div>
    <!-- 以下是展示某篇贴文详情及用户评论的页面，从右往打左开抽屉展示 -->
    <el-drawer
      title="贴文详情"
      :visible.sync="drawer"
      :direction="direction"
      :size="size"
      :before-close="handleClose"
    >
      <div class="none"></div>
      <div class="detailContainer">
        <div class="contentContainer">
          <div class="avatarContainer">
            <img class="avatar" src="@/assets/images/avatar.jpg" />
            <div>
              <span>作者:{{ post.upId }}</span>
              <span>发布于:{{ format(post.upTime) }}</span>
            </div>
          </div>
          <div class="content">
            <span>{{ post.content }}</span>
          </div>
          <div class="bottomContainer">
            <div>
              <span>{{ post.scan ? post.scan : 0 }}次浏览</span>
            </div>
            <div>
              <span>类型:{{ post.type }}</span>
            </div>
            <div>
              <img
                @click="handleAgree"
                v-if="!agreeFlag"
                class="icon"
                src="@/assets/icon/同意.png"
              />
              <img
                @click="handleAgree"
                v-if="agreeFlag"
                class="icon"
                src="@/assets/icon/已点赞.png"
              />
              <span>{{ post.agree }}</span>
            </div>
            <div>
              <img
                @click="handleDisagree"
                v-if="!disagreeFlag"
                class="icon"
                src="@/assets/icon/不同意.png"
              />
              <img
                @click="handleDisagree"
                v-if="disagreeFlag"
                class="icon"
                src="@/assets/icon/已不同意.png"
              />
              <span>{{ post.disagree }}</span>
            </div>
            <div>
              <img
                @click="handleSave"
                v-if="saveFlag"
                class="icon"
                src="@/assets/icon/已收藏.png"
              />
              <img
                @click="handleSave"
                v-if="!saveFlag"
                class="icon"
                src="@/assets/icon/收藏.png"
              />
              <span>{{ post.save ? post.save : 0 }}</span>
            </div>
            <div>
              <img
                @click="handleComment"
                class="icon"
                src="@/assets/icon/评论.png"
              />
              <span>{{ 3 }}条评论</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div
          class="commentComtainer"
          v-for="(item, index) in commentsList"
          :key="index"
        >
          <div class="comment-item">
            <div class="avatarContainer">
              <img class="avatar" :src="item.avatar" />
              <div>
                <span>{{ item.userName }}</span>
                <span>发布于:{{ item.uptime }}</span>
              </div>
            </div>
            <div class="content">
              <span>{{ item.content }}</span>
            </div>
            <div class="bottomContainer">
              <div>
                <img class="icon" src="@/assets/icon/同意.png" />
                <span>{{ item.agree }}</span>
              </div>
              <div>
                <img class="icon" src="@/assets/icon/不同意.png" />
                <span>{{ item.disagree }}</span>
              </div>
              <div>
                <img class="icon" src="@/assets/icon/评论.png" />
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="none"></div>
    </el-drawer>
  </div>
</template>

<script>
import { getPostByPostId, praisePost, postPraiseList } from "@/utils/api";
import dateFormat from "@/utils/dateFormat";
export default {
  props: ["postId"],
  data() {
    return {
      fromWhere: "bingo/Article", //从哪个组件来到此组件的路由地址，默认是bingo/Article,在此组件独享守卫的路由前置守卫会更新来源地址
      drawer: false, //是否打开抽屉，查看用户贴文详情及评论
      direction: "rtl", //抽屉从右往左打开
      size: "70%", //抽屉大小
      showclose: true,
      agreeFlag: false, //用户是否已点赞
      disagreeFlag: false, //用户是否已点踩
      saveFlag: false, //用户是否已收藏
      userId: "", //用户id
      postPraiseIds: [], //保存用户点赞过的贴文id
      // speed: 5000,
      // 用户贴文详情
      post: {}, //保存当前展示的贴文
      // 列表保存所有用户评论信息
      commentsList: [
        {
          id: "222", //评论id
          upId: "111",
          userName: "GDUT1",
          avatar: require("@/assets/images/avatar.jpg"),
          content:
            "我非常不同意作者爱广工的观点，我非常不同意工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点",
          uptime: "2022年05月19日 19:23",
          agree: 100,
          disagree: 100,
        },
        {
          id: "222", //评论id
          upId: "111",
          userName: "GDUT2",
          avatar: require("@/assets/images/avatar.jpg"),
          content:
            "我非常不同意作者爱广工的观点，我非常不同同意作者爱广工的观点",
          uptime: "2022年05月19日 19:23",
          agree: 100,
          disagree: 100,
        },
        {
          id: "222", //评论id
          upId: "111",
          userName: "GDUT3",
          avatar: require("@/assets/images/avatar.jpg"),
          content:
            "我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点，我非常不同意作者爱广工的观点",
          uptime: "2022年05月19日 19:23",
          agree: 100,
          disagree: 100,
        },
      ],
    };
  },
  methods: {
    async getPostDetails(postId) {
      // 发送请求获取贴文详情
      if (postId != null && postId != "") {
        let result = await getPostByPostId(postId);
        this.post = result.data.resultMap.post;
        // 将postList保存到data
        // console.log(postList);
      }
    },
    showDetails() {
      // 发送请求获取贴文详情
      // 获取贴文详情成功
      this.drawer = true; //打开抽屉展示贴文详情数据
    },
    handleClose(done) {
      done();
      // 关闭贴文详情页时，跳转到原来的组件，从哪来到哪去
      this.$router.push({ path: this.fromWhere });
    },
    // 处理同意
    async handleAgree() {
      let flag = this.agreeFlag; //true表示已点赞，false表示还没点赞
      if (flag) {
        //已点赞了，再次点赞就是取消点赞了
        // 发送取消点赞请求
        let result = await praisePost({
          postsId: this.postId,
          userId: this.userId,
          type: 3,
        });
        // 更新状态为没有点赞
        this.agreeFlag = false;
        this.post.agree = result.data.resultMap.agreeCount;
      } else {
        // 发送点赞请求/同时取消点踩
        let result = await praisePost({
          postsId: this.postId,
          userId: this.userId,
          type: 1,
        });
        //还没有点赞，改为已点赞状态同时取消点踩
        this.agreeFlag = true;
        this.disagreeFlag = false;
        this.post.agree = result.data.resultMap.agreeCount;
      }
    },
    // 处理不同意业务
    async handleDisagree() {
      let flag = this.disagreeFlag; //true表示已点踩，false表示还没点踩
      if (flag) {
        //已点踩了，再次点踩就是取消点踩了
        // 发送取消点踩请求
        let result = await praisePost({
          postsId: this.postId,
          userId: this.userId,
          type: 4,
        });
        this.post.agree = result.data.resultMap.agreeCount;
        // 更新状态为没有点踩
        this.disagreeFlag = false;
      } else {
        // 发送点踩请求/同时取消点赞
        let result = await praisePost({
          postsId: this.postId,
          userId: this.userId,
          type: 2,
        });
        this.post.agree = result.data.resultMap.agreeCount;
        //还没有点踩，改为已点踩状态同时取消点赞
        this.disagreeFlag = true;
        this.agreeFlag = false;
      }
    },
    // 处理收藏业务
    handleSave() {
      this.saveFlag = !this.saveFlag;
      // 发送收藏业务请求
    },
    // 处理评论业务
    handleComment() {
      this.$prompt("请输入您的观点", "")
        .then(({ value }) => {
          // console.log(value);
          if (value != null) {
            // 发送处理评论请求
            this.$message({
              type: "success",
              message: "评论成功",
            });
          } else {
            this.$message({
              type: "error",
              message: "评论失败,不能为空",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 根据用户id获取所有用户点赞过的贴文id
    async initPostPraiseList(userId) {
      let result = await postPraiseList({ userId });
      this.postPraiseIds = result.data.postPraiseIds;
      if (this.postPraiseIds.indexOf(this.postId) != -1) {
        this.agreeFlag = true;
      }
    },
    // 格式化日期
    format(date) {
      return dateFormat(date);
    },
  },
  created() {
    this.userId = sessionStorage.getItem("userId"); //从本地获取用户id
    // 根据postId获取当前要展示的贴文
    this.getPostDetails(this.postId);
    // 展示获取到的贴文详情数据及用户评论的数据
    this.showDetails();
    // 初始化数据，根据用户id获取所有用户点赞过的贴文id
    this.initPostPraiseList(this.userId);
    // 这里有个bug，只判断用户是否已点赞这个贴文，但是没判断用户是否已点踩这个贴文
    if (this.postPraiseIds.indexOf(this.postId) != -1) {
      this.agreeFlag = true;
    }
  },
  beforeRouteEnter(to, from, next) {
    next((articleDetailsVM) => {
      // 通过 `vm` 访问组件实例
      // 将访问此页面的上一个路由地址保存在this.fromWhere
      articleDetailsVM.fromWhere = from.fullPath;
      // console.log('from',from.fullPath);
    });
  },
};
</script>

<style>
.none {
  height: 20px;
}
.detailContainer {
  margin: auto;
  width: 823px;
  /* height: 836px; */
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 26px -7px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* 贴文内容包裹器 ===============================================================================*/
.contentContainer {
  width: 754px;
  /* height: 255.9px; */
  /* border: 1px solid black; */
  margin: 10px 0;
}
/* 头像、昵称、发布时间 */
.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.avatarContainer div {
  height: 49px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: 10px;
}
.avatarContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 贴文内容区 */
.contentContainer .content {
  width: 754px;
  /* border: 1px solid red; */
  margin: 5px 0;
}
/* 底部点赞、收藏、评论、浏览次数导航条 */
.icon {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}
.bottomContainer div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.bottomContainer {
  width: 754px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* border: 1px solid red; */
}
/* ================================================================================== */
/* 分割线 */
.line {
  width: 794px;
  height: 0px;
  border: 1px solid #d8d8d8;
}
/* 评论包裹器 */
.commentComtainer {
  width: 754px;
  /* border: 1px solid black; */
  margin: 10px 0;
}
.comment-item .content {
  width: 754px;
  /* border: 1px solid red; */
  margin: 5px 0;
}
/* ================================================================================= */
.detailContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
</style>